<template>
  <div>
    <!--顶部搜索-->
    <div class="box1">
      <div class="search-index">
        <div class="shuxian"></div>
        <input class="search-input"
               type="text"
               placeholder="请输入内容" />
        <i class="anniu iconfont icon-sousuokuang"></i>
        <i class="lingdang iconfont icon-lingdang"></i>
      </div>
    </div>
    <div style="height:50px"></div>
    <!--轮播图-->
    <div class="swiper-container mySwiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#">
            <img src="../img/2 (1).jpg"
                 title="" />
          </a>
        </div>
        <div class="swiper-slide">
          <router-link to="/order">
            <img src="../img/6.jpg"
                 title="" />
          </router-link>
        </div>
        <div class="swiper-slide">
          <a href="#">
            <img src="../img/1.jpg"
                 title="" />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#">
            <img src="../img/2.jpg"
                 title="" />
          </a>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev mySwiperBtn"></div>
      <div class="swiper-button-next mySwiperBtn"></div>
    </div>
    <!-- 小标题 -->
    <div class="box2">
      <ul>
        <li class="xiaobiaoti">
          <div>
            <a href="#">
              <i class="biaoti iconfont icon-zhaoyisheng">
                <h5 class="ti">查找医生</h5>
              </i>
            </a>
          </div>
        </li>
      </ul>
      <ul>
        <li class="xiaobiaoti">
          <div>
            <router-link to="/vaccine">
              <a href="#">
                <i class="biaoti iconfont icon-yimiao">
                  <h5 class="ti">疫苗服务</h5>
                </i>
              </a>
            </router-link>
          </div>
        </li>
      </ul>
      <ul>
        <li class="xiaobiaoti">
          <div>
            <a href="#">
              <i class="biaoti iconfont icon-jiankangchaxun">
                <h5 class="ti">健康查询</h5>
              </i>
            </a>
          </div>
        </li>
      </ul>
      <ul>
        <li class="xiaobiaoti">
          <div>
            <a href="#">
              <i class="biaoti iconfont icon-yishi">
                <h5 class="ti">医师讲堂</h5>
              </i>
            </a>
          </div>
        </li>
      </ul>
    </div>
    <!-- 打卡 -->
    <div class="ka">
      <div class="wrapper">
        <!-- <div class="item"></div> -->
        <router-link to="/detection">
          <img class="item"
               src="../img/7 (2).jpg"
               title="打卡" />
        </router-link>
        <img class="item"
             src="../img/11.jpg"
             title="" />
        <!-- <div class="item"></div> -->
      </div>
    </div>
    <!-- 疫苗 -->
    <div class="yimiao">
      <h2 class="kepu">最新动态</h2>
    </div>
    <!-- 文章渲染 -->
    <div style="margin-bottom: 60.8px">
      <div class="yishi"
           v-for="(item,index) in articelList"
           :key="index"
           @click="articleDetail(index)">
        <div class="box4">
          <img class="tupian1"
               :src="item.post.score"
               title="打卡" />
          <div class="wenzi">
            <h2 class="puji">{{item.post.title}}</h2>
            <div class="zhishi">
              {{item.post.content}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <common-footer></common-footer>
  </div>
</template>

<script>
import { getArticleMessage } from "../../api/getData.js";
import CommonFooter from "@/components/CommonFooter.vue";
export default {
  components: {
    CommonFooter
  },
  data () {
    return {
      articelList: []
    }
  },
  mounted () {
    var mySwiper = new Swiper(".mySwiper1", {
      loop: true,
      effect: "slide", //slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
      autoplay: {
        delay: 3000,
        disableOnInteraction: false //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
      },
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  },
  // 首次获取首页数据
  created () {
    this.$message.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0
    });
    getArticleMessage().then((res) => {
      window.localStorage.setItem("articleList", JSON.stringify(res.data.data))
      let List = JSON.parse(window.localStorage.getItem("articleList"))
      for (var i = 0; i < 4; i++) {
        this.articelList.push(List[i])
      }
      this.$message.success("加载成功")
      this.$message.clear()
    }).catch(() => {
      this.$message("加载失败")
      this.$message.clear()
    })
  },
  methods: {
    articleDetail (index) {
      this.$router.push({ name: "ArticleDetail", params: { detailData: JSON.stringify(this.articelList[index]) } })
    }
  }
};
</script>

<style lang="scss" scoped>
/* 第一部分搜索框 */
.box1 {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 999;
}

a {
  text-decoration: none;
  color: #222;
}

/* 搜索框 */
.search-index {
  position: fixed;
  display: flex;
  width: 100%;
  height: 44px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 540px;
  min-width: 320px;

  /*background-color: aqua;*/
}

/* 搜索按钮 */
.anniu {
  position: absolute;
  left: 4%;
  top: 5%;
  left: 5%;
  z-index: 1;
  color: rgba(0, 186, 173, 1);
  font-size: 25px;
}
.search-input {
  position: relative;
  border: 1px solid #ccc;
  flex: 1;
  font-size: 12px;
  color: #666;
  margin: 7px 10px;
  padding-left: 25px;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-top: -0.5%;
  text-align: center;
  line-height: 20px;
  height: 29px;
  padding: 0px;
}

.search-input::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 15px;
  height: 15px;
  // background: url(../images/sprite.png) no-repeat -59px -279px;
  background-size: 104px auto;
}

.user {
  margin-top: -4%;
  margin-right: 2%;
  width: px;
  height: 44px;
  text-align: center;
  font-size: 14px;
  color: black;
  margin-top: -6%;
  /*background-color: black;*/
}

.user::before {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  // background: url(../images/sprite.png) no-repeat -59px -194px;
  background-size: 104px auto;
  margin: 5px auto -2px;
}
.lingdang {
  font-size: 28px;
  margin-right: 2%;
  margin-top: 0.5%;
  color: rgba(0, 186, 173, 1);
}
/* 轮播图 */
.swiper-container {
  width: 95%;
  height: 200px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #ccc;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}
/*自定义分页器样式*/
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 100%;
  background: #fff;
  opacity: 1;
  margin: 0 10px;
}

.swiper-pagination-bullet-active {
  background-color: red;
}
.swiper-button-next .mySwiperBtn {
  width: 15px;
  height: 30px;
  font-size: 8px;
}
.box2 {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
}

.biaoti {
  color: rgba(0, 186, 173, 1);
  float: left;
  margin-top: 9px;
  margin-left: 12px;

  font-size: 25px;
}
.ti {
  font-size: 12px;
  margin-top: 9px;
  color: #49c3fe;
  text-shadow: 1px 1px 1px #49c3fe;
  margin-left: -10px;
}
// 打卡
.daka {
  width: 40%;
  height: 91px;
  background-color: brown;
  position: absolute;
  left: 15px;
  top: 12px;
}
.zhushou {
  width: 40%;
  height: 91px;
  background-color: brown;
  margin-left: 190px;
  margin-top: 12px;
  position: absolute;
}
.ka {
  position: relative;
  height: 110px;
  // background: brown;
  display: flex;
  justify-content: space-around;
}

.ka .wrapper {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.ka .wrapper .item {
  margin-top: 10px;
  width: 138px;
  height: 90px;
  border-radius: 6px;
  box-shadow: 5px 14px 51px #ccc;
}
.yimiao {
  width: 100%;
  height: 30px;
  // background-color: red;
}
.kepu {
  line-height: 30px;
  font-weight: bold;
  margin-left: 10px;
  // color: rgba(0, 186, 173, 1);
}
.yishi {
  width: 95%;
  height: 90px;
  background-color: rgb(245, 245, 245);
  margin: 8px 0;
  border-radius: 20px;
  // background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  background-image: linear-gradient(-225deg, #f5eef5 0%, #d7fffe 100%);
  background-blend-mode: normal, color-burn;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}
.box4 {
  position: relative;
  display: flex;
  justify-content: space-around;
}
.tupian1 {
  height: 80px;
  width: 110px;
  background-color: rgba(0, 186, 173, 1);
  // margin-left: -150px;
  margin-top: 6px;
  //  position: absolute;
}
.yishi .wenzi {
  height: 75px;
  width: 175px;
  // background-color: blue;
  margin-top: 10px;
  // margin-left: 140px;
}
.puji {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
}
.zhishi {
  width: 170px;
  font-size: 12px;
  height: 48px;
  // background-color: red;
  margin-top: 6px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}
</style>